<template>
    <h2>添加物资领用</h2>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="from" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>

        <el-form-item label="标题" prop="headline">
            <el-input v-model="from.headline" placeholder="请输标题" />
        </el-form-item>
        <el-form-item label="用途描述" prop="purposeDescription">
            <el-input v-model="from.purposeDescription" type="textarea" placeholder="请输入用途描述" />
        </el-form-item>
        <el-form-item label="备注" prop="sPReserveNote">
            <el-input v-model="from.sPReserveNote" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="选择领用物品" prop="sMCargoName">

            <el-input v-model="from.sMCargoName" placeholder="请输领用物品" @change="ALLStockManagementList()" />
            <el-button type="primary" @click="tianjia()">添加</el-button>
        </el-form-item>


        <table v-if="selectI.length > 0">
            <thead>
                <tr>
                    <th>货物名称</th>
                    <th>类型</th>
                    <th>材质</th>
                    <th>规格</th>
                    <th>产地</th>
                    <th>仓库数量</th>
                    <th>领用数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(inde, index) in selectI">
                    <td>{{ inde.sMCargoName }}</td>
                    <td> {{ inde.typeName }}</td>
                    <td> {{ inde.materiaLqualityName }}</td>
                    <td> {{ inde.sMGaugeLattice }}</td>
                    <td> {{ inde.nationName }}-{{ inde.provinceName }}</td>
                    <td> {{ inde.sMQuantity }}</td>
                    <td>
                        <el-input v-model="numberArray[index]" style="width: 90px;" />
                    </td>
                    <td>
                        <span @click="datetimt(inde.sMCargoID)">删除</span>
                    </td>
                </tr>
            </tbody>
        </table>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import { useRouter } from 'vue-router'
const router = useRouter()

//数据信息
const from = reactive({
    "headline": "",
    "sMCargoName": "",
    "purposeDescription": "",
    "sPReserveNote": "",
    "sPApprover": "string",
    "sPApprovalStatus": 1,



    "selectItemsToReceiveDTOList": []
})
const tiaojian = ref("")
const selectI = ref([])
const numberArray = ref([])


//显示列表选择
const ALLStockManagement = ref([])
const ALLStockManagementList = () => {
    axios.get("MaterialRead/api/Receiving/ALLStockManagementList", {
        params: {
            sMCargoName: from.sMCargoName
        }
    }).then(res => {
        ALLStockManagement.value = res.data.data
    }).catch(err => {
        console.log(err)
    })
}
//条件
const tianjia = () => {
    axios.get("MaterialRead/api/Receiving/RStockManagementList?sMCargoID=" + tiaojian.value).then(res => {
        //selectI.value = res.data.data
        selectI.value.push(res.data.data[0])//[{}, {}, {}]
        console.log(selectI.value)
    }).catch(err => {
        console.log(err)
    })
}
//删除
const datetimt = (index: number) => {
    // selectI.value = selectI.value.splice(index)
    selectI.value = selectI.value.filter(litm => litm.sMCargoID != index)
    console.log(selectI.value)
}
//添加
const mergedArray = ref([])
const submitForm = async (formEl: FormInstance | undefined) => {
    mergedArray.value = selectI.value.map((obj, index) => ({
        ...obj,
        number: numberArray.value[index]
    }))
    console.log(mergedArray.value)

    mergedArray.value.map(inde => {
        let ofi = {
            sMCargoID: inde.sMCargoID,
            sIPQuantity: inde.number,
        };
        from.selectItemsToReceiveDTOList.push(ofi)
    })
    console.log(from)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("materialwrite/api/Receiving/AddReceiving", from).then(res => {
                if (res.data.code > 0) {
                    ElMessage.success("提交成功")
                    router.push("/ReceiveList")
                } else {
                    ElMessage.error("提交失败")
                }
            }).catch(err => {
                console.log(err)
            })

        } else {

        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style></style>